<template>
  <div class="box">
    <img src="../../assets/images/login3.jpg" alt="" class="img1">
    <div class="login-box">
      <a-card :style="{ width: '360px' }">
        <div class="img">
          <img src="../../assets/images/logo.png" width="100" alt="">
        </div>
        <div class="title">管网压力智能检测平台</div>
        <div class="form">
          <a-form :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
            <a-form-item
                field="username"
                tooltip="请输入用户名"
                hide-asterisk
                :rules="[{required:true,message:'必须填写用户名'},{minLength:2,message:'用户名不能低于两位'}]"
            >
              <a-input
                  class="input"
                  v-model="form.username"
                  placeholder="请输入用户名称"
              />
            </a-form-item>
            <a-form-item
                field="password"
                :rules="[{required:true,message:'必须填写密码'},{minLength:6,message:'用户名不能低于六位'}]"
            >
              <a-input v-model="form.password" placeholder="请输入登录密码" class="input" type="password"/>
            </a-form-item>
            <a-form-item>
              <a-button html-type="submit" type="primary" class="login-btn">登录</a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {reactive} from "vue";
import {useUserLogin} from "../../store/userLogin";

// form 双向绑定约束
interface FormType {
  username: string;
  password: string
}
// form 双向绑定
const form = reactive<FormType>({
  username: '马达啦',
  password: '666666',
});

// 表单提交
// 实例化用户登录状态机调用用户登录actions
const userLoginStore = useUserLogin()
const handleSubmit =  () => {
  userLoginStore.userLoginActions(form)
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
}
.img1 {
  width: 1920px;
  height: 970px;
  position: static;
}
.login-box {
  margin: 100px auto;
  width: 430px;
  height: 560px;
  position: absolute;
  top: 0;
  left: 800px;
  opacity: .9;


  .arco-card-bordered {
    width: 100%;
    height: 100%;
    box-shadow: 10px 18px 16px rgba(0,0,0,.2);
    border-radius: 10px;
  }
  .title {
    height: 50px;
    width: 100%;
    text-align: center;
    font-size: 30px;
    color: #0079fe;
    margin-top: 70px;
    font-weight: 700;
  }
  .form {
    width: 100%;
    margin-left: -107px;
    margin-top: 20px;
    .input {
      width: 300px;
      height: 50px;
    }
    .login-btn {
      width: 300px;
      height: 50px;
    }
  }
}
.img {
  width: 100px;
  height: 100px;
  margin:20px auto;
}
</style>
